<template>
  <div>
    <el-dialog
      :visible.sync="touTiaodialogVisible"
      width="35%"
      class="toutiao-message"
      :show-close="false"
      :center="true"
    >
      <div class="toutiao-message-con">
        <span @click="contentLike()">收藏</span><br />
        <br />
        <span @click="touTiaoJuBao()">举报</span>
      </div>
    </el-dialog>
    <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
      <div class="collectTouTiaoTopAll">
        <div class="collectTouTiaoTop">
          <span>选择收藏夹</span>
        </div>
        <hr />
        <div class="collectTouTiaoTopCon">
          <div class="collectTouTiaoTopCon-con">默认收藏单</div>
          <div class="collectTouTiaoTopCon-con">我的喜欢</div>
          <van-radio-group v-model="radio" class="danxuankuang">
            <van-radio
              name="1"
              shape="square"
              class="danxuankuang-item"
            ></van-radio>
            <van-radio
              name="2"
              shape="square"
              class="danxuankuang-item"
            ></van-radio>
          </van-radio-group>
        </div>

        <van-button
          type="default"
          size="large"
          class="collectTouTiaoTopConAlaery"
          @click="collectTouTiaoTopAlaery()"
          >完成</van-button
        >
      </div>
    </van-popup>
    <div class="top" @click="discover()">
      <router-link to="/">
        <van-icon name="arrow-left" class="topIcon" size="3rem" />
      </router-link>
      <div class="toutiaoTop">动态</div>
      <i class="el-icon-more jubao" size="5rem" @click="collentThis(item)"></i>
    </div>
    <div class="heart_banner">
      <van-image
        round
        width="5rem"
        height="5rem"
        :src="discussAll.user_image_road"
        class="toutiaoUserImg"
      />
      <div class="toutiaoName">{{ discussAll.user_name }}</div>
      <div class="toutiaoTime">{{ discussAll.discuss_date }}</div>
      <van-button
        v-show="focusButton"
        round
        type="info"
        size="small"
        class="first"
        @click="focusThem()"
        >&nbsp;&nbsp;关 &nbsp;&nbsp;注&nbsp;&nbsp;
      </van-button>
      <van-button
        v-show="!focusButton"
        color="gray"
        round
        type="info"
        size="small"
        class="first"
        @click="focusThem()"
        >已&nbsp;&nbsp;关&nbsp;&nbsp;注</van-button
      >
      <div class="toutiaoText">{{ discussAll.discuss_text }}</div>
      <div
        v-for="(items, index) in discussAll.Image"
        :key="index"
        class="textImg"
      >
        <van-image
          width="8rem"
          height="8rem"
          fit="cover"
          :src="items.discuss_review_image_road"
        />
      </div>
    </div>

    <div class="foot1" v-show="bigReplay">
      <input class="inp" v-model="input" placeholder="分享你此刻的想法" />
      <div class="alreadySentIt" @click="replayIt()">完成</div>
      <van-uploader class="upload" :after-read="afterRead" />
    </div>
    <div class="foot" v-show="replayTheTopic" @click="replayItem()">
      <van-cell-group>
        <van-icon name="edit" class="icon" @click="replayItem()" />
        <van-field
          v-model="value"
          placeholder="写回复"
          class="replayAlready"
          @click="replayItem()"
        />
      </van-cell-group>
    </div>
    <div class="heart_banner" v-for="(item, index) in replayList" :key="index">
      <div  class="replayLi">
        <van-image
          round
          width="5rem"
          height="5rem"
          :src="item.user_image_road"
          class="toutiaoUserImg"
        />
        <div class="toutiaoName">{{ item.user_name }}</div>
        <div class="toutiaoTime">{{ item.reply_date }}</div>
        <div class="toutiaoText1">{{ item.reply_text }}</div>
        <div v-for="(items, index) in item.Image" :key="index" class="textImg">
          <van-image
            width="8rem"
            height="8rem"
            fit="cover"
            :src="items.discuss_review_image_road"
          />
        </div>
        <div class="icon1">
          <img
            v-show="item.show"
            src="/static/images/heartBefore(0).png "
            alt=""
            width="16rem"
            class="imgHeart"
            @click="giveLikes(item, index)"
          />
          <img
            v-show="!item.show"
            src="/static/images/heartBefore(1).png"
            alt=""
            width="14rem"
            class="imgHeart"
            @click="giveLikes(item, index)"
          />

          <span class="discuss">{{ item.discuss_likes }}</span>
          <van-icon
            name="chat-o"
            size="1.5rem"
            @click="toutiaoTextDetail(item)"
          />
          <span class="discuss" @click="toutiaoTextDetail(item)">{{
            item.cun
          }}</span>
        </div>
      </div>
    </div>
    <div class="footL"></div>
  </div>
</template>

<script>
import http from '../../api/index';
import util from '../../util/index';
export default {
  data() {
    return {
      discussAll: [],
      activeName: 'zan',
      value: '',
      input: '',
      replayTheTopic: true,
      bigReplay: false,
      focusButton: true,
      touTiaodialogVisible: false,
      show: false,
      radio: 1,
      replayList: [],
    };
  },
  methods: {
    //所有的大框消失
    discover() {
      this.bigReplay = false;
      this.replayTheTopic = true;
      event.stopPropagation();
    },
    //回复
    toutiaoTextDetail(item) {
      this.bigReplay = true;
      this.replayTheTopic = false;
      event.stopPropagation();
    },
    //点赞
    giveLikes(item, index) {
      this.showAdd = !this.showAdd;
      item.show = !item.show;
      this.$forceUpdate();
      event.stopPropagation();
    },
    //举报
    touTiaoJuBao() {
      // console.log('item',this.chooseItem);
      this.$router.push('/report/' + this.discussAll.user_id);
      event.stopPropagation();
    },
    //收藏完成
    collectTouTiaoTopAlaery() {
      this.show = false;
      this.$message({
        type: 'success',
        message: '收藏成功!',
      });
      event.stopPropagation();
    },
    //收藏底部菜单栏
    contentLike() {
      this.touTiaodialogVisible = false;
      this.show = true;
      event.stopPropagation();
    },
    //收藏
    collentThis(item) {
      this.chooseItem = item;
      this.touTiaodialogVisible = true;
      event.stopPropagation();
    },
    //回复完成
    replayIt() {
      if (this.input === '') {
        this.$message({
          message: '请输入内容',
          type: 'warning',
        });
      } else {
        util
          .addReply({
            type_id: 1,
            reply_public_id: this.discussAll.discuss_record_id,
            user_id: sessionStorage.getItem('roleId')||1004,
            reply_text: this.input,
          })
          .then((res) => {
            console.log('res',res)
            util
              .findAllReply({
                reply_public_id: this.discussAll.discuss_record_id,
                type_id: 1,
                pages: 1,
              })
              .then((res) => {
                console.log('111', res);
                this.replayList = res.data;
                for (let i = 0; i < this.replayList.length; i++) {
                  this.replayList[i].show = true;
                }
              });
          });
        this.$message({
          message: '评论成功',
          type: 'success',
        });
        this.bigReplay = false;
          this.replayTheTopic = true;
          this.input='';
        event.stopPropagation();
      }
    },
    //大的框
    escAll() {
      this.bigReplay = false;
      this.replayTheTopic = false;
      event.stopPropagation();
    },
    // 关注
    focusThem() {
      this.focusButton = !this.focusButton;
      event.stopPropagation();
    },
    //大框消失
    displayBig() {
      this.bigReplay = false;
      this.replayTheTopic = true;
      event.stopPropagation();
      // event.preventDefault()
    },
    // 小框消失
    replayItem() {
      this.bigReplay = true;
      this.replayTheTopic = false;
      event.stopPropagation();
    },
    // 文件上传
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      event.stopPropagation();
    },
  },
  mounted() {
    http
      .getTouTiao({
        pages: 1,
      })
      .then((r) => {
        console.log(r);
        for (let i = 0; i < r.data.length; i++) {
          if (this.$route.params.id == r.data[i].discuss_record_id) {
            this.discussAll = r.data[i];
            console.log(this.discussAll);
          }
        }
        console.log('111', this.discussAll.discuss_record_id);
        util
          .findAllReply({
            reply_public_id: this.discussAll.discuss_record_id,
            type_id: 1,
            pages: 1,
          })
          .then((res) => {
            console.log('111', res);
            this.replayList = res.data;
            for (let i = 0; i < this.replayList.length; i++) {
              this.replayList[i].show = true;
            }
          });
      });
  },
};
</script>
<style scoped>
.top {
  height: 5rem;
  width: 100%;
  background-color: skyblue;
}
.topIcon {
  color: white;
  margin-top: 1rem;
}
.heart_banner {
  margin: 0 auto;
  /* border-radius: 1.5rem; */
  background-color: white;
  margin-bottom: 1rem;
  padding: 1rem;
}
.toutiaoName {
  display: inline-block;
  position: relative;
  top: -3rem;
  font-size: 1.5rem;
  margin-left: 0.5rem;
}
.toutiaoText {
  font-size: 1.5rem;
  margin-top: 1rem;
  margin-left: 3rem;
}
.toutiaoText1 {
  font-size: 1.5rem;
  margin-top: 1rem;
  margin-left: 5.5rem;
}
.toutiaoTime {
  font-size: 1rem;
  margin-left: 5.9rem;
  margin-top: -2.5rem;
  color: gray;
}
.toutiaoUserImg {
  display: inline-block;
  /* margin-top: -5rem; */
}
.textImg {
  display: inline-block;
  margin-left: 2rem;
  margin-top: 2rem;
}
.first {
  margin-left: 27rem;
  position: relative;
  top: -4rem;
}
.first-top {
  position: sticky;
  top: 0px;
  margin: 0 auto;
}
.foot {
  width: 100%;
  height:4rem;
  background-color: white;
  /* top:32rem; */
  position: fixed;
  bottom:1rem;
  z-index: 100000;
}
.foot1 {
  background-color: white;
  position: fixed;
  bottom: 0rem;
  width: 100%;
  height: 15rem;
   z-index: 100000;
}
.icon {
  position: relative;
  top: 2rem;
  z-index: 1000;
  right: -0.5rem;
}
.replayAlready {
  position: relative;
  top: -1rem;
  width: 100%;
 
}
.toutiaoTop {
  font-size: 2rem;
  line-height: 5rem;
  color: white;
  position: relative;
  top: -0.8rem;
  display: inline-block;
}
.box {
  width: 100%;
  /* height: 10rem; */
  background-color: white;
}
.upload {
  position: relative;
  top: 3rem;
}
.location {
  background-color: white;
  position: relative;
}
.inp {
  width: 100%;
  border: none;
  height: 3rem;
  margin-left: 1rem;
}
.alreadySentIt {
  font-size: 1.5rem;
  color: skyblue;
  position: relative;
  margin-left: 36rem;
  top: -3rem;
}
.jubao {
  position: relative;
  left: 28rem;
  top: -1rem;
}
.unfold {
  position: relative;
  top: -2.5rem;
  left: 27rem;
}
.toutiao-message {
  margin-top: 24rem;
}
.toutiao-message-con {
  margin-top: -4.5rem;
  font-size: 1.8rem;
  padding-left: 2rem;
  margin-bottom: -1rem;
}
.collectTouTiaoTopAll {
  font-size: 2rem;
}
.collectTouTiaoTopCon {
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-left: 2rem;
  margin-right: 2rem;
}
.danxuankuang {
  margin-left: 32rem;
  margin-top: -7.3rem;
}
.danxuankuang-item {
  margin-bottom: 2rem;
}
.collectTouTiaoTopCon-con {
  margin-bottom: 1rem;
}
.collectTouTiaoTopConAlaery {
  position: fixed;
  bottom: 0rem;
}
.collectTouTiaoTop {
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-left: 2rem;
  margin-right: 2rem;
}
.icon1 {
  margin-left: 34rem;
}
.imgHeart {
  position: relative;
  top: 0rem;
  margin-left: -2rem;
}
.footL{
  width: 100%;
  height: 5rem;
}
</style>